<template>
  <el-dialog :title="form.id?'编辑权限':'新增权限'" :visible.sync="showDialog" @close="reset">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="form.description" />
      </el-form-item>
      <el-form-item label="是否开启">
        <el-switch
          v-model="form.enVisible"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="showDialog=false"> 取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
function newForm() {
  return {
    name: '',
    code: '',
    description: '',
    type: 1,
    pid: '0',
    enVisible: '0'
  }
}
import { addPermission, getPermission, updataPermission } from '@/api/permission'
export default {
  data() {
    return {
      form: newForm(),
      showDialog: false,
      rules: {
        name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入权限描述', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    open(type, pid) {
      this.showDialog = true
      this.form.type = type
      this.form.pid = pid
    },
    async save() {
      await this.$refs.form.validate()
      if (this.form.id) {
        await updataPermission(this.form)
      } else {
        await addPermission(this.form)
      }

      this.$message.success('保存成功')
      this.showDialog = false
      this.$emit('reload')
    },
    reset() {
      this.form = newForm()
      this.$refs.form.resetFields()
    },
    async edit(id) {
      this.form = await getPermission(id)
      this.showDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
